<template>
  <div
    class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200"
  >
    <!-- 头部 -->
    <header-vue></header-vue>
    <!-- 表单 -->
    <div
      class="block xl:py-4 px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 xl:rounded-sm xl:shadow-lg"
    >
      <h3
        class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300 xl:block"
      >
        账号注册
      </h3>
      <!-- 表单 -->
      <vee-form @submit="onRegisterHandler">
        <!-- 用户名 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          type="text"
          name="username"
          placeholder="用户名"
          v-model="regForm.username"
          autocomplete="on"
          :rules="validateUsername"
        />
        <!-- name属性用来和输入框绑定 -->
        <vee-error-message
          class="text-sm block mt-0.5 text-red-600 text-left"
          name="username"
        />
        <!-- 密码 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          type="password"
          name="password"
          placeholder="密码"
          v-model="regForm.password"
          autocomplete="on"
          :rules="validatePassword"
        />
        <!-- name属性用来和输入框绑定 -->
        <vee-error-message
          class="text-sm text-red-600 mt-0.5 block text-left"
          name="password"
        />
        <!-- 确认密码 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          type="password"
          name="validateConfimPassword"
          placeholder="再次输入密码"
          v-model="regForm.comfirmPassword"
          autocomplete="on"
          rules="validateConfimPassword:@password"
        />
        <!-- name属性用来和输入框绑定 -->
        <vee-error-message
          class="text-sm text-red-600 mt-0.5 block text-left"
          name="validateConfimPassword"
        />
        <!-- 跳转按钮 -->
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a
            class="inline-block px-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer"
            >去登录
          </a>
        </div>
        <!-- 注册协议 -->
        <div class="text-center mb-1">
          <a
            class="text-zinc-400 dark:text-zinc-600 hover:text-zinc-400 dark:hover:text-zinc-400 text-sm duration-300"
            target="_blank"
            href="https://m.imooc.com/newfaq?id=89"
            >注册即统一注册协议</a
          >
        </div>
        <!-- 注册按钮 -->
        <m-button
          class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
          :isActiveAnim="false"
          :loading="loading"
          >立即注册</m-button
        >
      </vee-form>
    </div>
  </div>
</template>

<script setup>
import headerVue from '../components/header.vue'
import {
  validateUsername,
  validatePassword,
  validateConfimPassword
} from '../validate'
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage,
  defineRule
} from 'vee-validate'
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { LOGIN_USERNAME } from '@/constants'

const store = useStore()
const router = useRouter()

const loading = ref(false)

// 注册一条规则
// params: 1. 名字 2. 参数
defineRule('validateConfimPassword', validateConfimPassword)

// 用户信息
const regForm = ref({
  username: '',
  password: '',
  confirmPassword: ''
})

// 提交注册
const onRegisterHandler = async () => {
  loading.value = true
  try {
    const payload = {
      username: regForm.value.username,
      password: regForm.value.password
    }
    await store.dispatch('user/register', payload)
    // 注册完成触发登录
    await store.dispatch('user/login', {
      ...payload,
      loginType: LOGIN_USERNAME
    })
    router.push('/')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped></style>
